﻿<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>はやく入力してね『カチャカチャカチャ･･･ ッターン！』 ・・・ jdtPleaseHurryInput.js</title>
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
	
	<!--[if lt IE 9]>
		<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
	<![endif]-->
	
	<link href="./css/style.css" rel="stylesheet" type="text/css">

    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", '1.4.2');</script>
    <script type="text/javascript" src="js/jdtpleasehurryinput.js"></script>
    <script type="text/javascript">
    jQuery(function($)
    {
		//プラグイン実行
        $("input").jdtPleaseHurryInput();
		
		//以下おまけ
		var exsample = "What we really need is this 'daretoku plugin'.";

		$(document).keydown( function(e) 
		{
			if ( e.keyCode == 17 )
			{
				//ctrlボタンを押した
				alert("もしかして：コピペ");
			}
		});
		
		setTimeout( function()
			{
				$("p#example").css( "opacity", 0.0 ).html(exsample).fadeTo( 1000,1.0 );
			},
			2 * 1000 );
			
		$("#question2").attr("disabled", "disabled");
		$("#question1").focus( function ()
			{
				setTimeout( function()
					{
						$("#question2").removeAttr("disabled"); 
					}, 5 * 1000 );
			});
    });
    </script>

</head>
<body>
<div id="container">
  <header>テキストボックスにフォーカスすると5秒以内にブラーしないとdisabledが付くjQueryプラグイン<!-- end header --></header>
  <div id="content">
    <h1>jdtPleaseHurryInput</h1>
      <section>
		<h3>問題1</h3>
        <p>次の文章を5秒で入力してね。</p>
     	<p id="example">&nbsp;</p>
	    <p><input type="text" id="question1" value=""></p>
	  </section>
      <hr />
	  <section>
    	<h3>問題2</h3>
     	<p>もっかいやっとく？</p>
		<p><input type="text" id="question2" value="">&nbsp;</p>
		</section>
      <hr />
	  <section>
    	<h3>ダウンロード</h3>
     	<p>ダウンロードはここから</p>
		<p><a href="http://code.google.com/p/jdtplugins/downloads/detail?name=jdtpleasehurryinput.zip&can=2&q="><img src="image/btn_download.png" alt="download"></a></p>
	</section>   
<!-- end .content --></div>
<footer>
  <p style="text-align:right;"><a href="http://prog.re-d.net">kamiyam</a></p>
<!-- end footer --></footer>
<!-- end .container --></div>

<!-- overlay -->
<div id="overlay">
</div>
<div id="overlay_surface">
  <div class="overlay_inner">&nbsp;</div>
</div>
</body>
</html>
